<template>
    <li v-for="(item, index) in datas" :key="item.id">
        <el-checkbox v-model="item.isChecked" size="small" />
        <span>{{ item.content }}</span>
        <el-button @click="dele(index)">删除</el-button>
    </li>
</template>

<script setup>
import useTodoListStore from '../store/module/TodoList';
import { ElMessage, ElMessageBox } from 'element-plus'
import { storeToRefs } from 'pinia'
const todoListStore = useTodoListStore()
const { datas } = storeToRefs(todoListStore)
const { del } = todoListStore

const dele = (index) => {
    ElMessageBox.confirm(
        '确认删除吗?',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            del(index)
        })
        .catch(() => { })
}
</script>

<style>
ul li,
#footer {
    display: flex;
    justify-content: space-between;
}

.text {
    color: #ccc;
    text-decoration: line-through;
}
</style>